<template>
    <section v-loading="firstLoading" style="height:100%;">
        <el-table
            stripe
            border
            :data="dataList"
            v-if="dataList.length"
        >
            <el-table-column prop="recordId" :label="$t('common.label.recordId')" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <el-button 
                        type="text" 
                        @click="openNewTab(row)"
                    >
                        {{row.recordId}}
                    </el-button>
                </template>
            </el-table-column>
            
            <el-table-column prop="customerName" :label="$t('common.label.customerName')" show-overflow-tooltip/>

            <el-table-column prop="linkmanName" :label="$t('common.label.contact')" show-overflow-tooltip/>

            <el-table-column prop="dialPhone" :label="$t('common.label.contactPhone')" show-overflow-tooltip/>

            <el-table-column prop="consultName" :label="$t('common.label.consultClassify')" show-overflow-tooltip/>

            <el-table-column prop="callType" :label="$t('common.label.callType')" :formatter="formatterState" show-overflow-tooltip/>

        </el-table>


        <NoAuth v-if="!firstLoading && !dataList.length"/>

        <Pagination 
            v-model="page"
            @handleSizeChange="initData"
            @handleCurrentChange="initData">
        </Pagination>
    </section>
</template>

<script>
import Pagination from '../Pagination.vue'

// 暂无数据组件
import NoAuth from '../NoAuth.vue'

import * as HomeApi from "@src/api/HomeApi";
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'
import { t } from '@src/locales'

export default {
    // 通话列表数据
    name:'tabPaneCall',

    data(){
        return {
            loading:false,

            // 用于解决第一次进入直接展示暂无数据再展示数据的bug
            firstLoading:true,

            page:{
                total:0,
                pageSize:10,
                pageNum:1
            },
            dataList:[]
        }
    },
    props:{
        user:{
            type:Object,
            required:true
        },
        userId:[String,Number]
    },

    components:{
        Pagination,
        NoAuth
    },

    mounted(){
        this.initData();
    },

    methods:{
        initData(){
            const { pageSize, pageNum } = this.page;

            const params = {
                pageSize,
                pageNum,
                userId:this.userId
            }

            this.loading = true;
            HomeApi.getCallRecordList(params).then((res) => {
                const { data:{ list = [],total = 0 }, status } = res;
                this.dataList =  list;
                this.page.total = total;

                this.loading = false;
                this.firstLoading = false
            }).catch(e=>{
                this.loading = false;
                this.firstLoading = false
            })
        },

        formatterState(row, column) {
            const { callType} = row;
            
            return callType == 0 ? t('common.base.callType[0]') : t('common.base.callType[1]');
        },

        openNewTab({id,dialPhone}){
            const fromId = window.frameElement.getAttribute('id');

            // this.$platform.openTab({
            //     id: `callcenter_view_${id}`,
            //     title: '通话详情',
            //     close: true,
            //     url: `/setting/callcenter/view?id=${id}&phone=${dialPhone}`,
            //     // fromId: 'M_CASE',
            //     fromId
            // }); 
            openAccurateTab({
                type: PageRoutesTypeEnum.PageCallcenterView,
                key: id,
                params: `id=${id}&phone=${dialPhone}`,
                fromId
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.el-table{
    border-top:1px solid #E8E8E8;
    border-left:1px solid #E8E8E8;
}
</style>
